<template>
  <div class="component-tm">
    <div class="table-page-search-wrapper">
      <a-form-model :model="queryParam" layout="inline">
        <a-spin :spinning="loading">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="合同编号">
                <a-input v-model="queryParam['filter[contract_no]']" placeholder="输入合同编号" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="业务编号">
                <a-input v-model="queryParam['filter[business_no]']" placeholder="输入业务编号" />
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="高新类别">
                  <a-select @change="businessChange" placeholder="选择高新类别" v-model="queryParam['filter[business_id]']">
                    <a-select-option v-for="option in options['businesses']" :key="option.business_id" :value="option.business_id">
                      {{ option.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="进展状态">
                  <a-select @change="statusChange" v-model="queryParam['filter[status2_state]']" placeholder="选择进展状态">
                    <a-select-option v-for="(status, index) in status" :key="index" :value="index">{{ status }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="开启时间">
                  <a-range-picker v-model="queryParam['open_time_start']" @change="onSubmitTime" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="更新时间">
                  <a-range-picker v-model="queryParam['updated_at_start']" @change="onSubmitTime1" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="业务来源">
                  <a-select v-model="queryParam['filter[business_type]']" @change="sourceChange" placeholder="选择业务来源">
                    <a-select-option v-for="(option,index) in options['business_type_opts']" :key="index" :value="index">{{ option }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="客户名称">
                  <a-input v-model="queryParam['filter[customer_name]']" placeholder="输入客户名称" />
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="联系电话">
                  <a-input v-model="queryParam['filter[phone]']" placeholder="输入联系电话" />
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-spin>
      </a-form-model>
    </div>
    <div class="table-operations">
      <a-card>
<!--        <div slot="title" v-if="!loading">-->
<!--&lt;!&ndash;          <a-button size="small" type="primary" :disabled="selectedRowKeys.length === 0" :style="{ marginRight: '5px' }">批量下载</a-button>&ndash;&gt;-->
<!--          <a-button size="small" :style="{ marginRight: '5px' }" @click="getUnread(1)">全 部</a-button>-->
<!--          <a-button size="small" :type="unread_status ? 'danger' : 'default'" :style="{ marginRight: '5px' }" @click="getUnread(0)">未读业务({{counts['data_count_unread']}})</a-button>-->
<!--        </div>-->
<!--        <div slot="extra" v-if="!loading">-->
<!--          <a-badge :count="counts.category_count_unread.gxzz" :style="{ marginLeft: '20px' }">-->
<!--            <a-button size="small" :type="btn_status == '高新认证' ? 'primary' : 'default'" data-text="高新认证" @click="statusFilter">高新认证</a-button>-->
<!--          </a-badge>-->
<!--        </div>-->
        <div class="title">
          <a-tabs @change="onTabs">
            <a-tab-pane key="today" :tab="`今日更新(${today})`"></a-tab-pane>
            <a-tab-pane key="total" :tab="`全部(${total})`"></a-tab-pane>
          </a-tabs>
        </div>
        <template slot="extra">
          <a-button style="margin-right:5px" :disabled="selectedRowKeys.length == 0" size="small" type="primary">批量下载</a-button>
          <a-button style="margin-right:5px" :disabled="selectedRowKeys.length == 0" size="small" type="danger">批量上传</a-button>
          <a-button size="small" type="primary">筛选倒计时业务</a-button>
        </template>
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.cb_id"
          :row-class-name="(record) => { if (record.is_read == 0) return 'table-color-dust' }"
          :columns="GxColumns"
          :data="GxData"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`搜索${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
              重置
            </a-button>
          </div>
          <template slot="xuhao" slot-scope="text, record, index">
            {{ index + 1 }}
          </template>
          <template slot="business_type" slot-scope="text">
            <a-badge :color="text == '我的业务' ? 'green' : 'yellow'" status="processing" />
          </template>
          <template slot="contract_no" slot-scope="text, record">
            <a-button type="link" @click="toContractDetail(record.contract_id)" style="padding: 0">{{ text }}</a-button><br>
            <a-button type="link" @click="toBusinessDetail(record.cb_id)" style="padding: 0">{{ record.business_no }}</a-button>
          </template>
          <template slot="phone" slot-scope="text, record">
            <div style="display: flex;align-items: center">
              <a-button size="small" type="primary" ghost style="width: 100px;overflow: hidden;margin: 0" @click="makePhone(record.customer_id)">{{text}}</a-button>
              <a-button size="small" type="primary" icon="phone" @click="makePhone(record.customer_id)"></a-button>
            </div>
          </template>
          <template slot="sb_name" slot-scope="text, record">
            {{text}}{{record.zl_name}}{{record.bq_name}}{{record.sj_file_name}}
          </template>
          <template slot="price" slot-scope="text, record">
            <div class="price">
              <a-tag color="red">价格￥{{ text }}</a-tag><br>
              <a-tag color="red">官费￥{{ record.official_fee }}</a-tag>
            </div>
          </template>
          <template slot="status2" slot-scope="text, record">
            <div v-if="record.state_file_url !== ''">
              <div>
                <a :href="record.state_file_url" target="_blank"><a-icon :style="{ fontSize: '18px', color: '#1890ff' }" type="file-pdf" /></a>
                <a @click="downFile(record.state_file_url, record.state_file_name)"><a-icon :style="{ fontSize: '18px', color: '#1890ff' }" type="download" /></a>
                {{ record.state_name }}
              </div>
              <div>{{ record.state_file_name }}</div>
            </div>
            <div v-else>
              <a-button v-if="text == 24" type="danger" icon="edit" size="small" @click="getResult(record.cb_id)">{{ record.status2_name }}</a-button>
              <a-button v-if="text == 10 || text == 22" type="danger" icon="edit" size="small" @click="getSubmitFill(record.cb_id)">{{ record.status2_name }}</a-button>
              <a-button
                ghost
                v-if="text == 20 || text == 26"
                type="danger"
                size="small"
                @click="getSubmitFill(record.cb_id)"
              >
                {{ record.status2_name }}
              </a-button>
              <a-button
                ghost
                v-if="text == 30"
                type="primary"
                size="small"
                @click="getSubmitFill(record.cb_id)"
              >
                {{ record.status2_name }}
              </a-button>
              <a-button v-if="text == 40" type="primary" size="small" @click="getSubmitFill(record.cb_id)">{{ record.status2_name }}</a-button>
              <a-button v-if="text == 50" type="dashed" size="small" @click="getSubmitFill(record.cb_id)">{{ record.status2_name }}</a-button>
            </div>
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button type="primary" size="small" @click="toBusinessDetail(record.cb_id)">查看</a-button>
          </template>
        </s-table>
      </a-card>
    </div>
    <fill-modal v-if="visible" :fill-key="fillKey" :from-source="'1'" @submit="handleSubmit" @cancel="handleCancel"></fill-modal>
    <confirm-modal v-if="visible2" :fill-key="fillKey" @submit="handleSubmit1" @cancel="handleCancel1"></confirm-modal>
    <phone-modal v-if="modalVisible" :customer-id="customerId" @cancel="modalExit"></phone-modal>
  </div>
</template>

<script>
  import { PhoneModal, STable } from '@/components'
  import FillModal from '@/views/business/components/FillModal'
  import { getList, getCount, getStatus, postFill } from '@/api/business'
  import businessColumns from '@/columns/business'
  import apis from '@/api'
  import ConfirmModal from '@/views/business/components/ConfirmModal'
  const GxColumns = businessColumns.GxColumns

  export default {
    props: {
      today: {
        type: Number,
        default: 0
      },
      total: {
        type: Number,
        default: 0
      },
      categoryId: {
        type: String,
        default: '60'
      }
    },
    components: {
      ConfirmModal,
      FillModal,
      STable,
      PhoneModal
    },
    name: 'GaoXin',
    data () {
      return {
        GxColumns,
        GxData: parameters => {
          return getList(Object.assign(parameters, this.queryParam)).then(res => {
            this.options['businesses'] = res.result.businesses
            this.options['sb_category_opts'] = res.result.sb_category_opts
            this.options['business_type_opts'] = res.result.business_type_opts
            return res.result
          })
        },
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        advanced: false,
        queryParam: {},
        options: {},
        selectedRowKeys: [],
        loading: true,
        counts: {},
        status: {},
        businessDetail: {},
        visible: false,
        visible2: false,
        fillKey: '',
        customerId: '',
        modalVisible: false,
        btn_status: '',
        unread_status: false
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        const app = this
        app.queryParam['filter[category]'] = app.categoryId
        app.queryParam['filter[is_update]'] = 'today'
        getCount(app.queryParam).then(res => {
          if (res.status === 0) {
            app.counts = res.result
            getStatus('').then(status => {
              if (status.status === 0) {
                app.status = status.result.items
                app.loading = false
              } else {
                app.$warning({
                  title: status.msg
                })
              }
            })
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      makePhone (id) {
        this.customerId = id
        this.modalVisible = true
      },
      modalExit (visible) {
        this.modalVisible = visible
      },
      toBusinessDetail (id) {
        this.$router.push({ name: 'BusinessDetail', params: { id } })
      },
      toContractDetail (id) {
        this.$router.push({ name: 'ContractDetail', params: { cid: id } })
      },
      getUnread (read) {
        if (read === 0) {
          this.queryParam['filter[is_read]'] = read
          this.unread_status = true
          this.$refs.table.refresh()
        } else {
          delete this.queryParam['filter[is_read]']
          this.unread_status = false
          this.$refs.table.refresh()
        }
      },
      getSubmitFill (id) {
        this.fillKey = id
        this.visible = true
      },
      getResult (id) {
        this.fillKey = id
        this.visible2 = true
      },
      handleSubmit1 (form) {
        console.log(form)
        const app = this
        form['cb_id'] = app.fillKey
        postFill(form).then(res => {
          if (res.status === 0) {
            app.$refs.table.refresh()
            app.handleCancel1()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      handleSubmit (form) {
        const app = this
        form['cb_id'] = app.fillKey
        postFill(form).then(res => {
          if (res.status === 0) {
            app.$refs.table.refresh()
            app.handleCancel()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      handleCancel1 (visible) {
        this.visible2 = visible
      },
      handleCancel (visible) {
        this.visible = visible
      },
      // handleFilter (event) {
      //   if (event !== 'all') {
      //     this.queryParam['filter[status2_state]'] = event
      //   } else {
      //     this.queryParam = {}
      //   }
      //   this.$refs.table.refresh(true)
      // },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      businessChange (e) {
        if (e !== '') {
          this.queryParam['filter[business_id]'] = e
        } else {
          delete this.queryParam['filter[business_id]']
        }
        getStatus(e).then(res => {
          this.status = res.result.items
        })
      },
      tmtpyeChange (e) {
        if (e !== '') {
          this.queryParam['filter[sb_category]'] = e
        } else {
          delete this.queryParam['filter[sb_category]']
        }
      },
      statusChange (e) {
        if (e !== '') {
          this.queryParam['filter[status2_state]'] = e
        } else {
          delete this.queryParam['filter[status2_state]']
        }
      },
      onSubmitTime (date, dateString) {
        for (let i = 0; i < dateString.length; i++) {
          if (i === 0) {
            this.queryParam['filter[open_time_start]'] = dateString[i]
          }
          if (i === 1) {
            this.queryParam['filter[open_time_end]'] = dateString[i]
          }
        }
      },
      onSubmitTime1 (date, dateString) {
        for (let i = 0; i < dateString.length; i++) {
          if (i === 0) {
            this.queryParam['filter[updated_at_start]'] = dateString[i]
          }
          if (i === 1) {
            this.queryParam['filter[updated_at_end]'] = dateString[i]
          }
        }
      },
      sourceChange (e) {
        if (e !== '') {
          this.queryParam['filter[business_type]'] = e
        } else {
          delete this.queryParam['filter[business_type]']
        }
      },
      resetForm () {
        this.queryParam = {}
        this.queryParam['filter[category]'] = '60'
        this.$refs.table.refresh(true)
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
      },
      handleReset (clearFilters) {
        clearFilters()
      },
      downFile (value, filename) {
        window.open(apis.Download + '?value=' + value + '&filename=' + filename)
      },
      statusFilter (e) {
        const txt = e.target.dataset.text
        if (this.btn_status === txt) {
          delete this.queryParam['filter[state_name]']
          this.btn_status = ''
          this.$refs.table.refresh(true)
        } else {
          this.queryParam['filter[state_name]'] = txt
          this.btn_status = txt
          this.$refs.table.refresh(true)
        }
      },
      onTabs (key) {
        this.tab = key
        this.queryParam['filter[is_update]'] = key
        this.$refs.table.refresh()
      }
    },
    computed: {
      allMsg () {
        const total = parseInt(this.counts['data_count_status10']) + parseInt(this.counts['data_count_status22']) + parseInt(this.counts['data_count_status24'])
        return total
      }
    }
  }
</script>

<style scoped>
  .price {
    line-height: 30px;
  }
  .note >>> img {
    display: block;
    width: 100%;
  }
  .base-info-scroll {
    height: 700px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 15px;
  }
  /deep/ .ant-table-tbody > tr.table-color-dust {
    background-color: #ffcccc;
  }
</style>
